<template>
	<div class="personal">
		<div class="user-info">
			<div class="header">
				<header class="fixed_top"><a @click="back()" class="back"></a><span>个人中心</span></header>
			</div>
			<div>
				<img id="headimg_block" :src="userItem.avatar" onerror="this.src='src/img/1.jpg'" class="headerimg">
				<div class="msg">
					<h2 class="text-beyond name" id="username_block">{{userItem.nickname}}</h2>
					<div class="balance">
						<span id="myid" style="margin-right:20px;">ID：{{userItem.uid}}</span>
						<span class="text-beyond" id="coinbalance_block">余额：<small>{{userItem.coinbalance}}</small></span>
						<img src="../assets/images/shouyejinbi.png">
					</div>
				</div>
			</div>
		</div>
		<personal-list></personal-list>
	</div>
</template>

<script type="text/javascript">
	import personalList from '../components/personalList'
	export default{
		name:"appPersonal",
		components:{personalList},
		computed:{
			userItem(){
				return this.$store.state.userInfo;
			}
		},
		methods:{
			back(){
				this.$router.go(-1)
			}
		}
	}
</script>

<style lang="less" scoped>
	.personal{
		width:100%;
		height:100%;
		background: #f2f2f2;
		padding-bottom:30px;
	}
	.user-info {
	    padding-bottom: 15px;
	    background: url(../assets/images/gerenzhongxinbeijing.png) no-repeat center;
	    background-size: cover;
	}
	.header{
	    width:100%;
	}
	.fixed_top {
	    width: 100%;
	    height: 50px;
	    text-align: center;
	    /*background: url(../assets/images/gerenzhongxinbeijing.png) no-repeat top center;*/
	    background-size: 100%;
	    font-size: 0;
	    line-height: 50px
	}

	.fixed_top .back {
	    position: absolute;
	    top: 5px;
	    left: 0;
	    display: block;
	    width: 40px;
	    height: 40px;
	    background: url(../assets/images/fanhuijian.png) no-repeat center;
	    background-size: 12px;
	    vertical-align: middle;
	}
	.fixed_top span {
	    vertical-align: middle;
	    font-size: 16px;
	    color: #060606;
	}
	.user-info .headerimg {
	    display: block;
	    width:80px;
	    height:80px;
	    margin: 0 auto;
	    border-radius: 100%;
	    border: 1px solid #dea405;
	}
	.user-info .msg {
	    width: calc(100% - 80px);
	    margin: 10px auto;
	    text-align: center;
	}
	.user-info .name {
	    width: 100%;
	    font-size:15px;
	    margin-bottom: 8px;
	    color: #333;
	    font-weight: 400;
	}
	.user-info .balance {
	    display: inline-block;
	    width: 100%;
	    span{
		    font-size:15px;
		    color: #333;
		    small {
			    color: #eb0100;
			}
		}
		img {
		    width:15px;
		    vertical-align: sub
		}
	}














</style>